let ng  = angular,
    app = ng.module("app", []);

app.directive("panel", (panel$) => {
    return {
        restrict: "E",
        replace : true,
        scope: {
            rows: "@",
            cols: "@"
        },
        controller($scope) {
            $scope.length = $scope.rows * $scope.cols; 
            $scope.items = panel$.init(4, 4, 480, 720);
            $scope.items.data.shift();
            console.info(panel$.init(4, 4, 480, 720));
        },
        template:
            '<ul id="panel">' +
            '   <item ng-repeat="it in items.data" it="it">' +
            '   </item>' +
            '</ul>'
    }
})
.directive("item", () => {
    return {
        restrict: "E",
        replace: true,
        link($scope, $elem, $attrs) {
        },
        template:
            '<li style="width:{{it.width}}px;' +
            '   height:{{it.height}}px;' +
            '   left: {{it.left}}px;' +
            '   top: {{it.top}}px">' +
            '   {{it.id}}' +
            '</li>'
    } 
})
.service("panel$", () => {
    let template = {
        index: 0,
        id: 0,
        top: 0,
        left: 0,
        height: 0,
        width: 0
    },
    items = {data: []},    
    fill = (rows, cols) => {        
        for (let i = 0, len = rows * cols;
            i < len; i++) {

            let e = Object.create(template);
            e.index = e.id = i;
            items.data[i] = e;
        }
    };
    
    return {
        init(rows, cols, panelWidth, panelHeight) {
            items     = items || fill(rows, cols);
            let w     = panelWidth / cols,
                h     = panelHeight / rows;
            
            console.log("==", items);
            items.data.map((e) => {
                e.width   = w;
                e.height  = h;
                e.left    = (e.index % cols) * w;
                e.top     = Number.parseInt(e.index / rows) * h;
            });
            return this.items;
        }
        
    }
    
})

ng.bootstrap(document, ["app"]);